<template>
  <el-row>
    <el-row>
      <h1 class="monitor-title">{{ $t('pageOverview.systemMonitor') }}</h1>
    </el-row>
    <el-row class="monitor-body" :gutter="60">
      <el-col class="monitor-col" :span="6">
        <div class="dash-board-div">
          <dash-board class="dash-board" :usage="cpuUsage" type="rate" />
          <h2>{{ $t('pageOverview.cpuUsageRate') }}</h2>
        </div>
      </el-col>
      <el-col class="monitor-col" :span="6">
        <div class="dash-board-div">
          <dash-board class="dash-board" :usage="cpuUsage" type="rate" />
          <h2>{{ $t('pageOverview.memoryUsageRate') }}</h2>
        </div>
      </el-col>
      <el-col class="monitor-col" :span="6">
        <div class="dash-board-div">
          <dash-board class="dash-board" :usage="cpuUsage" type="rate" />
          <h2>{{ $t('pageOverview.diskUsageRate') }}</h2>
        </div>
      </el-col>
      <el-col class="monitor-col" :span="6">
        <div class="dash-board-div">
          <dash-board class="dash-board" :usage="cpuUsage" type="power" />
          <h2>{{ $t('pageOverview.powerConsumption') }}</h2>
        </div>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import { Row, Col } from 'element-ui';
import DashBoard from '@/components/Global/DashBoard';
export default {
  name: 'Monitor',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    DashBoard,
  },
  data() {
    return {
      cpuUsage: 45, // 示例 CPU 使用率，可以根据实际数据进行更新
    };
  },
  computed: {
    dumps() {
      return this.$store.getters['dumps/bmcDumps'];
    },
  },
};
</script>
<style lang="scss" scoped>
.monitor-title {
  color: #fff;
  font-size: 22px;
  padding-bottom: 10px;
}
.monitor-body {
  height: 150px;
}
.monitor-col {
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 10px;
  }
  .dash-board-div {
    background-color: #fff;
    border-radius: 5px;
  }
  .dash-board {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -20px;
  }
}
</style>
